<template>
  <view class="fuwu_main">
    <view class="top_bg"></view>
    <uni-card class="card">
      <uni-card class="card_box">
        <uni-section
          class="section"
          title="服务标准"
          type="line"
          titleFontSize="16px"
        >
        </uni-section>
      </uni-card>
      <uni-card class="card_box" title="服务区域:">
        <picker
          class="picker"
          @change="bindPickerChange"
          :value="index"
          :range="array"
        >
          <text>{{ array[index] }}</text>
        </picker>
      </uni-card>
      <uni-card class="card_box" title="服务类型:">
        <view class="example-body">
          <!-- <view class="tag-view tag" v-for="item in typeservice" :key="item.id">
            <uni-tag :inverted="true" :circle="true"  @click='optionTypeservice(item.type)' :text="item.type" />
          </view> -->
          <!-- <view class="tag-view tag" v-for="i in 20" :key="i">
            <uni-tag :inverted="true" :circle="true" text="标签" />
          </view> -->
          <uni-data-checkbox v-model="checkbox.value" :multiple="false" mode="tag" :localdata="checkbox.range" :circle="true">
          </uni-data-checkbox>
        </view>
      </uni-card>
      <uni-card class="card_box" title="星级标准:">
        <view class="example-body">
          <!-- <view class="tag-view tag" v-for="item in qualmark" :key="item.id">
            <uni-tag :inverted="true" :circle="true" @click='optionQualmark(item.type)' :text="item.type" />
          </view> -->
          <!-- <view class="tag-view tag" v-for="i in 20" :key="i">
            <uni-tag :inverted="true" :circle="true" text="标签" />
          </view> -->
          <uni-data-checkbox v-model="starList.value" :multiple="false" mode="tag" :localdata="starList.range" :circle="true">
          </uni-data-checkbox>
        </view>
      </uni-card>
    </uni-card>
    <button type="primary" class="button" @click="submit">家政服务标准查询</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      array: [
        "山东济南",
        "河北石家庄",
        "吉林长春",
        "黑龙江哈尔滨",
        "辽宁沈阳",
        "内蒙古呼和浩特",
        "新疆乌鲁木齐",
        "甘肃兰州",
        "宁夏银川",
        "山西太原",
        "陕西西安",
        "河南郑州",
        "安徽合肥",
        "江苏南京",
        "浙江杭州",
        "福建福州",
        "广东广州",
        "江西南昌",
        "海南海口",
        "广西南宁",
        "贵州贵阳",
        "湖南长沙",
        "湖北武汉",
        "四川成都",
        "云南昆明",
        "西藏拉萨",
        "青海西宁",
        "台湾台北",
      ],
      checkbox: {
        value: '',
        range: [{value:0,text: "月嫂"},{value:1,text: "育婴师"},{value:2,text: "保洁/清"},{value:3,text: "保姆"},{value:4,text: "早教/托"},{value:5,text: "养老/陪"},
        {value:6,text: "家装/搬"},{value:7,text: "产康师"}]
      },
      starList:{
        value: '',
        range: [{value:0,text: "一星"},{value:1,text: "二星"},{value:2,text: "三星"},{value:3,text: "四星"},{value:4,text: "五星"},{value:5,text: "金牌"}
       ]
      },
      // "一星","二星","三星","四星","五星","金牌"
      // "月嫂证","育婴师证","保洁证","保姆证","产康师证","早教证","养老证","搬家证"
      // "小学","初中","中专","职高","高中","大专","本科","研究生及以上"
      // '保姆','保洁','月嫂','家教','护工','催乳师','育婴师','钟点工'
      index: 0,
      typeservice: [],
      qualmark: [],
      typeserviceList: "",
      qualmarkLsit: "",
    };
  },
  onload() {
    // this.getTypeservice();
    // this.getQualmark();
  },
  methods: {
    bindPickerChange(e){
      console.log(e)
    this.index = e.detail.value
    },
    // 服务类型
    // async getTypeservice() {
    //   const {
    //     data: { message },
    //   } = await uni.$http.get("/typeservice");
    //   this.typeservice = message;
    // },
    // 星级标准
    // async getQualmark() {
    //   const {
    //     data: { message },
    //   } = await uni.$http.get("/qualmark");
    //   this.qualmark = message;
    // },
    submit(){
      // 1.回到上一页
       uni.navigateBack()
       // 2.显示提交成功
      uni.showToast({title: '提交成功'})
    },
    // 选择服务类型
    optionTypeservice(text) {
      this.typeserviceList = text;
    },
    // 选择星级标准
    optionQualmark(text) {
      this.qualmarkLsit = text;
    },
  },
};
</script>

<style lang="scss">
.button {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #3f51b5 !important;
}
.fuwu_main {
  width: 100%;
  position: relative;
  height: 100vh;
  .top_bg {
    background-color: #3f51b5;
    height: 30px;
  }
  .uni-card__header {
    border: none !important;
  }
  .example-body {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .tag {
    margin: 5px;
    padding: 2px;
  }
  .uni-card {
    position: relative;
    margin: 0 10px !important;
    padding: 0 !important;
    color: #000 !important;
    font-weight: 600 !important;
    border: none;
    box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.08) !important;
    border-bottom: 1rpx solid #ccc;
    border-radius: 0;

    .picker {
      position: absolute;
      right: 0;
      top: 40%;
      transform: translateY(-50%);
    }
  }
  .card {
    width: 100%;
    position: absolute;
    top: 0;
    margin: 0 0px !important;
    padding: 0 !important;
    .section {
      width: 100%;
    }
    .cityOp {
      display: flex;
      padding: 10px 5px;
      justify-content: space-between;
    }
  }
}
</style>
